<template>
    <CarouselView />
    <ConnectionView />
    <div class="produce_info">
        <h2>家用防盗门产品中心</h2>
        <h4>以客户需求和产品发展理念为驱动力</h4>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card card_display" style="width: 25rem;" v-for="burglary_proof_door in burglary_proof_door_list" :key="burglary_proof_door.id">
                    <div class="card-img-container" @click="open_a_produce(burglary_proof_door.title)">  
                        <img :src="burglary_proof_door.photo" class="card-img-top" alt="...">  
                    </div> 
                    <div class="card-body">
                        <p class="card-price">￥{{ burglary_proof_door.price }}</p>
                        <p class="card-text">{{ burglary_proof_door.title }} {{ burglary_proof_door.usage }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';
import CarouselView from '@/components/CarouselView.vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import ConnectionView from '@/components/ConnectionView.vue';
export default {
    name: 'BurglaryProofDoorView',
    components: {
        CarouselView,
        ConnectionView
    },
    setup() {
        const burglary_proof_door_list = ref([]);
        const router = useRouter();
        const store = useStore();

        $.ajax({
            url: "http://47.121.28.202:8000/settings/burglary_proof_door/",
            type: "GET",
            success(resp) {
                burglary_proof_door_list.value = resp;
            }
        })

        const open_a_produce = (produce_title) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'productinterface',
                    params: {
                        producename: produce_title,
                    } 
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        return {
            burglary_proof_door_list,
            open_a_produce
        }
    }
}
</script>

<style scoped>
.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page_info > h2 {
    margin-top: 30px;
    text-align: center;
    font-weight: bolder;
}
.page_info > h5 {
    text-align: center;
    color: gray;
    margin-bottom: 30px;
}
.produce_info {
    text-align: center;
}
.produce_info > h2 {
    font-weight: bolder;
    margin-top: 30px;
}
.produce_info > h4 {
    color: gray;
    margin-bottom: 30px;
}
.card_display {
    display: inline-block;
    margin: 15px;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box; 
}
.card-img-top {
    height: 400px;
    transition: transform 0.3s ease; 
    width: 100%; 
}
.card-text {
    margin-bottom: 0px;
}
.card-price {
    color: red;
}
.card-price {
    margin-bottom: 0px;
    float: right;
}
.card-img-top:hover {  
    transform: scale(1.1);
}
.card-img-container {  
    position: relative;
    width: 100%;  
    overflow: hidden;  
} 
</style>